<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>论坛中文网</title>
</head>

<body>

	<!-- 顶部导航条 -->
	<nav class="navbar navbar-default">
		<div class="container-fluid">
		  <!-- Brand and toggle get grouped for better mobile display -->
		  <div class="navbar-header">
			<a class="navbar-brand" href="/">论坛中文网</a>
		  </div>
	  
		  <!-- Collect the nav links, forms, and other content for toggling -->
		  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
			  <li class="active"><a href="/">首页</a></li>
			  <li><a href="#">代码</a></li>
			  <li><a href="#">编程</a></li>
			</ul>
			<form class="navbar-form navbar-left" action="/">
			  <div class="form-group">
				<input type="text" class="form-control" placeholder="全站搜索">
			  </div>
			  <button type="button" class="btn btn-default">搜索</button>
			</form>
			<!-- 右侧功能按钮，根据登录状态分为两种 not-logined=未登录 logined=已登录 -->
			<ul class="nav navbar-nav navbar-right not-logined">
			  <li><a href="/html/login.html"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 登录</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right logined">
				<!-- 根据当前登录用户的权限，控制这些class的显示隐藏 -->
				<li class="permission ARTICLE_PUBLISH">
					<button type="button" class="btn btn-primary" style="margin-top: 8px; margin-left: 2px;"
						onclick="javascript: window.open('/html/article_publish.html', '_self');"
					>
						<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发布文章
					</button>
				</li>
				<li class="permission USER_ADMIN ARTICLE_ADMIN">
					<button type="button" class="btn btn-info" style="margin-top: 8px; margin-left: 2px;">
						<span class="glyphicon glyphicon-home" aria-hidden="true"></span> 进入管理后台
					</button>
				</li>
				<!-- 登录之后功能比较多，下拉菜单 -->
				<li class="dropdown">
				  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					<img id="nav_avatar" class="img-circle" style="width: 18px;">
					<!-- 放昵称，jquery改变这个元素的内容 -->
					<span id="currentUser_nickName"></span>
					<span class="caret"></span>
				  </a>
				  <ul class="dropdown-menu">
					<li><a href="javascript: window.location.replace('/html/userInfo.html');">个人信息</a></li>
					<li><a href="#">修改密码</a></li>
					<li role="separator" class="divider"></li>
					<li><a href="javascript: logout();">退出登录</a></li>
				  </ul>
				</li>
			  </ul>
		  </div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>

<div style="padding: 10px; margin: 0px auto; max-width: 1600px;">
    <!-- 避免页面跳转 -->
    <iframe name="ifm" style="display: none;">
    </iframe>
    <form id="form" style="max-width: 600px;" method="post" target="ifm" enctype="multipart/form-data">
        <div class="form-group">
            <img src="/img/avatar.png" class="img-circle" style="width: 200px;" id="avatar">
        </div>
        <div class="form-group">
            <label for="inputfile">上传头像</label>
            <input type="hidden" name="category" value="头像">
            <input type="file" id="inputfile" name="file">
            <p class="help-block">请选择头像。</p>
        </div>
        <!-- 这个按钮提交当前表单，也就是上传头像 -->
        <button type="submit" class="btn btn-default">上传</button>
        <div class="form-group">
          <label for="nickName">昵称</label>
          <input type="text" class="form-control" id="nickName" placeholder="请输入名称">
        </div>
        <button type="button" class="btn btn-default">修改</button>
    </form>
</div>

</body>

<!-- 引入jquery -->
<script src="/js/jquery/jquery-1.10.2.min.js"></script>
<!-- 引入bootstrap -->
<link href="/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入main.js -->
<script src="/js/main.js"></script>

<script>

/**
 * 进入页面就会执行
 */
$(function() {
    // 设置form上传的路径
    $("#form").attr("action", BACK_URL + "/avatar");

	// 获取当前登录用户，会currentUser赋值
	getCurrentUser().then(() => {
		if(currentUser==null) {
			// .. 没登陆的处理
			freshForNotLogined();
            alert("登录已过期")
            window.location.replace("/html/login.html");// 暂时跳到主页
		}else {
			// ... 登录后的处理
			freshForLogined();
            freshForLoginedPage();
		}
	});
});

/**
 * 当前页面单独的处理
 */
function freshForLoginedPage() {
    $("#nickName").val(currentUser.nickName);
    $("#avatar").attr("src", BACK_URL + "/file" + currentUser.avatar);
}

</script>

<style>
    /** 登录和未登录的元素默认全隐藏 */
    .not-logined, .logined {
        display: none;
    }
    
    .navbar-right li {
        padding: 0px;
    }
    </style>

</html>